<template>
  <div>
    <el-table border style="margin: 20px 0;" :data="skuArr">
      <el-table-column label="序号" type="index" width="80" align="center"></el-table-column>
      <el-table-column label="名称" show-overflow-tooltip width="150" prop="skuName"></el-table-column>
      <el-table-column label="描述" show-overflow-tooltip width="150" prop="skuDesc"></el-table-column>
      <el-table-column label="默认图片" width="150">
        <template #default="{row}">
          <img v-show="row.skuDefaultImg.includes('blob') || !row.skuDefaultImg" src="@/assets/images/no-img.png" style="width: 100px;height: 100px;"/>
          <img v-show="!row.skuDefaultImg.includes('blob') && (row.skuDefaultImg!=='')" :src="row.skuDefaultImg" style="width: 100px;height: 100px;"/>
        </template>
      </el-table-column>
      <el-table-column label="重量" width="150" prop="weight"></el-table-column>
      <el-table-column label="价格" width="150" prop="price"></el-table-column>
      <el-table-column label="操作" width="250" fixed="right">
        <template #default="{row}">
          <!-- isSale:0下架状态 1上架状态 -->
          <el-button :type="row.isSale==1?'info':'success'" size="small" :icon="row.isSale==1?'Bottom':'Top'" @click="updateSale(row)"></el-button>
          <el-button type="warning" size="small" icon="Edit" @click="updateSku"></el-button>
          <el-button type="info" size="small" icon="InfoFilled" @click="findSku(row)"></el-button>
          <el-popconfirm width="200"  @confirm="removeSku(row)" :title="`你确认要删除${row.skuName}吗?`">
          <template #reference>
            <el-button type="danger" size="small" icon="Delete"></el-button>
            </template>
          </el-popconfirm>
        </template>
      </el-table-column>
    </el-table>
    <!-- 分页器 -->
    <el-pagination
      v-model:current-page="pageNo"
      v-model:page-size="pageSize"
      :page-sizes="[10,15,20]"
      background
      layout=" prev, pager, next, jumper,->, total, sizes,"
      :total="total"
      @size-change="sizeChange"
      @current-change="getHasSku"
    />
    <!-- 抽屉 展示商品详情-->
    <el-drawer  v-model="drawer" direction="rtl">
      <template #header>
        <h4>商品详情</h4>
      </template>
      <template #default>
        <el-row class="mt-10">
          <el-col :span="6">名称</el-col>
          <el-col :span="18">{{skuInfo.skuName}}</el-col>
        </el-row>
        <el-row class="mt-10">
          <el-col :span="6">描述</el-col>
          <el-col :span="18">{{skuInfo.skuDesc}}</el-col>
        </el-row>
        <el-row class="mt-10">
          <el-col :span="6">价格</el-col>
          <el-col :span="18">{{skuInfo.price}}</el-col>
        </el-row>
        <el-row class="mt-10">
          <el-col :span="6">平台属性</el-col>
          <el-col :span="18">
            <el-tag style="margin:0 5px 5px 0;" v-for="item in skuInfo.skuAttrValueList" :key="item.id">{{item.valueName}}</el-tag>
          </el-col>
        </el-row>
        <el-row class="mt-10 11" v-if="skuInfo.skuSaleAttrValueList.length>0">
          <el-col :span="6">销售属性</el-col>
          <el-col :span="18">
            <el-tag  style="margin: 5px ;" v-for="item in skuInfo.skuSaleAttrValueList" :key="item.id">{{item.saleAttrValueName}}</el-tag>
          </el-col>
        </el-row>
        <el-row class="mt-10 12" v-if="skuInfo.skuImageList.length>0">
          <el-col :span="6">商品图片</el-col>
          <el-col :span="18">
            <el-carousel :interval="4000" type="card" height="200px">
              <el-carousel-item v-for="item in skuInfo.skuImageList" :key="item.id">
                <img v-show="item.imgUrl.includes('blob') || !item.imgUrl" src="@/assets/images/no-img.png" style="width: 100%;height: 100%;"/>
                <img v-show="!item.imgUrl.includes('blob') && (item.imgUrl!=='')" :src="item.imgUrl" style="width: 100%;height: 100%;"/>
              </el-carousel-item>
            </el-carousel>
          </el-col>
        </el-row>
      </template>
    </el-drawer>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue'
import { reqRemoveSku, reqSkuInfo, reqCanelSale,reqSaleSku,reqSkuList } from '@/api/product/sku'
import type { SkuData, SkuDataList } from '@/api/product/sku/type'
import { ElMessage } from 'element-plus';

const pageNo = ref(1)

const pageSize = ref(10)

const total = ref(0)

// 获取sku数据
const skuArr = ref<SkuDataList>([])
const getHasSku = async () => {
  const res = await reqSkuList(pageNo.value,pageSize.value)
  if(res.code == 200) {
    skuArr.value = res.data.records
    total.value = res.data.total
  }
}

//条数变化
const sizeChange = () => {
  pageNo.value = 1
  getHasSku()
}


// 更新商品上架下架状态
const updateSale =async  (row:SkuData) => {
  if(row.isSale == 1) {
    //当前状态上架, 点击下架
    await reqCanelSale(row.id as number)
    ElMessage({
      type: 'success',
      message: '下架成功'
    })
    getHasSku()
  } else {
    //当前状态下架, 点击上架
    await reqSaleSku(row.id as number)
    ElMessage({
      type: 'success',
      message: '上架成功'
    })
    getHasSku()
  }
}

// 更新已有sku
const updateSku = () => {
  ElMessage({
      message: '该功能开发中~'
    })
}


// 抽屉相关
const drawer = ref(false)

// 查看sku详情
const skuInfo = ref<any>({
  skuImageList: [],
  skuAttrValueList:[],//sku平台属性数组
  skuSaleAttrValueList:[] // sku销售属性数组
})
const findSku = async (row: SkuData) => {
  drawer.value = true
  const res = await reqSkuInfo(row.id as number)
  skuInfo.value = res.data
}

// 删除sku
const removeSku = async (row: SkuData) => {
  const res = await reqRemoveSku(row.id as number)
  if(res.code == 200) {
    ElMessage({
      type: 'success',
      message: '删除成功~'
    })
    if(skuArr.value.length <= 1) {
      // pageNo.value = pageNo.value-1
      pageNo.value = pageNo.value - 1 <=1?1:pageNo.value - 1
    }
    getHasSku()
  } else {
    ElMessage({
      type: 'error',
      message: '删除失败~'
    })
  }
}



onMounted(()=>{
  getHasSku()
})



</script>

<style lang="scss">
  .mt-10 {
    margin: 10px 0;
    .el-carousel__item h3 {
      color: #475669;
      opacity: 0.75;
      line-height: 200px;
      margin: 0;
      text-align: center;
    }

    .el-carousel__item:nth-child(2n) {
      background-color: #99a9bf;
    }

    .el-carousel__item:nth-child(2n + 1) {
      background-color: #d3dce6;
    }
  }
  
</style>
